<template>
  <div>
    <!-- 搜索条 -->
    <search-bar></search-bar>
    <!-- 菜单 -->
    <div class="content">
      <div class="left">
        <div
          class="menu-item"
          v-for="(item, index) in listData"
          :key="index"
          :class="item.cat_id == currentIndex ? 'active' : ''"
          @click="changeHandle(item.cat_id)"
        >
          {{ item.cat_name }}
        </div>
      </div>
      <div class="right">
        <div class="brand-item" v-for="(item, index) in rightData" :key="index">
          <div class="brand-title">{{ item.cat_name }}</div>
          <div class="brand-list">
            <div class="brand" v-for="(brand, i) in item.children" :key="i">
              <image :src="brand.cat_icon" mode="aspectFill" />
              <p>{{ brand.cat_name }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SearchBar from "../../components/SearchBar.vue";
import request from "../../utils/request.js";
export default {
  data() {
    return {
      listData: [],
      // 当前菜单的ID
      currentIndex: 1,
    };
  },
  components: {
    "search-bar": SearchBar,
  },
  computed: {
    rightData() {
      // 计算属性中的结果依赖于data中的数据变化
      let rd = this.listData.filter((item) => {
        return item.cat_id == this.currentIndex;
      });
      // console.log(rd[0]);
      return rd.length > 0 ? rd[0].children : [];
    },
  },
  methods: {
    async cateData() {
      // 调用后台接口，初始化数据
      const res = await request("categories");
      // 更新页面数据
      this.listData = res.data.message;
      // console.log(this.listData);
    },
    changeHandle(id) {
      // console.log(id);
      // 左侧菜单切换操作
      this.currentIndex = id;
    },
  },
  created() {
    this.cateData();
    // console.log(this.rightData);
  },
};
</script>

<style scoped lang="less">
@import "./main.less";
</style>
